<template>
  <div>
    <!-- 背景图片 -->
    <div
      class="background"
      :style="`background-image:url(${backgroundImageUrl})`"
    >
      <!-- 用于上传文件的组件 -->
      <van-uploader class="background_bg" :after-read="upLogBg" />
    </div>
    <!-- 我的页面背景一下内容的大盒子盒子 用于给m_c_content定位上去 -->
    <div class="my_content">
      <!-- 我的页面内容小盒子盒子 -->
      <div class="m_c_content">
        <!-- 我的页面头像  昵称   个性签名位置 -->
        <div class="my_title">
          <!-- 我的头像位置 -->
          <div class="my_icon" :style="`background-image:url(${headImage})`">
            <!-- 上传头像的组件 -->
            <van-uploader :after-read="updateAvatar" />
          </div>
          <!-- 我的昵称  个性签名位置 -->
          <div class="my_name">
            <!-- 昵称位置 -->
            <div class="my_name_n">{{ name }}</div>
            <!-- 个性签名位置 -->
            <div class="my_tag">{{ MyTag ? MyTag:"这家伙很懒 , 什么也没有留下!"}}</div>
          </div>
        </div>
        <!-- 列表区 -->
        <div class="my_nav_item">
          <!-- 每条列表 -->
          <div class="item" @click="gofindAccountInfo">
            <div class="item_name">个人资料</div>
            <div class="item_icon"><van-icon name="arrow" /></div>
          </div>
          <div class="item" @click="goMyOrder">
            <div class="item_name">我的订单</div>
            <div class="item_icon"><van-icon name="arrow" /></div>
          </div>
          <div class="item" @click="goMycollections()">
            <div class="item_name">我的收藏</div>
            <div class="item_icon"><van-icon name="arrow" /></div>
          </div>
          <div class="item" @click="goSelectAddress()">
            <div class="item_name">地址管理</div>
            <div class="item_icon"><van-icon name="arrow" /></div>
          </div>
          <div class="item" @click="gosecurityCenter()">
            <div class="item_name">安全中心</div>
            <div class="item_icon"><van-icon name="arrow" /></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "My",
  data() {
    return {
      // 用于接收背景图片
      backgroundImageUrl: "",
      // 用于接收头像
      headImage: "",
      // 用于接收我的昵称
      name: "",
      //个性签名
      MyTag: "",
    };
  },
  created() {
    // 调用查询我的接口
    this.findmy();
  },
  methods: {
    // 用于上传背景图片的方法
    upLogBg(file) {
      // 此时可以自行将文件上传至服务器
      // 
      // 获取token
      // let tokenString = this.$cookies.get("TOKEN");
       let tokenString =  localStorage.getItem("TOKEN");

      // 处理base64
      // let base64 = file.content.replace(/^data:image\/[A-Za-z]+;base64,/, "");

      // 赋值老师的
      let base64 = file.content.replace(/^data:image\/[A-Za-z]+;base64,/, "");
      // 
      // 处理上传的格式
      let type = file.file.type.split(/\//)[1];

      // 上传用户背景接口
      // 请求地址：http://www.kangliuyong.com:10002/updateUserBg
      // 请求类型： POST
      // 请求参数： {
      //   appkey: 你的appkey,
      //   tokenString: token字符串,
      //   imgType: 图片类型jpg,jpeg,png.....
      //   serverBase64Img: 图片base64码
      // }

      // 调用上传背景图片的接口
      this.axios({
        method: "POST",
        url: "/updateUserBg",
        data: {
          tokenString,
          imgType: type,
          serverBase64Img: base64,
        },
      })
        .then((res) => {
          this.$toast(res.data.msg);
          if (res.data.code === "I001") {
            this.findmy();
          }
        })
        .catch((err) => {
          // 
        });
    },

    // 用于上传头像图片的方法
    updateAvatar(file) {
      // 上传头像接口
      // 请求地址：http://www.kangliuyong.com:10002/updateAvatar
      // 请求类型： POST
      // 请求参数： {
      //   appkey: 你的appkey,
      //   tokenString: token字符串,
      //   imgType: 图片类型jpg,jpeg,png.....
      //   serverBase64Img: 图片base64码
      // }
      // 获取token
      // let tokenString = this.$cookies.get("TOKEN");
       let tokenString =  localStorage.getItem("TOKEN");

      // 处理base64  为什么要处理
      let serverBase64Img = file.content.replace(
        /data:image\/jpeg;base64,/,
        ""
      );
      // 处理图片类型
      let imgType = file.file.type.split(/\//)[1];

      // 调用上传头像接口
      this.axios({
        method: "post",
        url: "/updateAvatar",
        data: {
          tokenString,
          serverBase64Img,
          imgType,
        },
      })
        .then((res) => {
          // 提示用户是否上传成功
          this.$toast(res.data.msg);
          // 判断是否上传成功
          if (res.data.code === "H001") {
            // 如果上传头像成功  再调用一下查询我的接口
            this.findmy();
          }
          // 
        })
        .catch((err) => {
          
        });
    },

    // 调用我的页面的接口 并且在created钩子函数调用
    findmy() {
      // 获取token
      // let tokenString = this.$cookies.get("TOKEN");
       let tokenString =  localStorage.getItem("TOKEN");

      // 调用我的接口
      this.axios({
        method: "GET",
        url: "/findMy",
        params: {
          tokenString,
        },
      })
        .then((res) => {
          if (res.data.code === 700) {
            this.$router.push({ name: "Login" });
            return;
          }
          if (res.data.code === "A001") {
            // 
            this.backgroundImageUrl = res.data.result[0].userBg;
            this.headImage = res.data.result[0].userImg;
            this.name = res.data.result[0].nickName;
            this.MyTag = res.data.result[0].desc;
          }
        })
        .catch((err) => {});
    },

    // 点击跳转到个人资料页面
    gofindAccountInfo(){
      this.$router.push({name:"FindAccountInfo"})
    },
    
    // 点击我的订单跳转至订单页面
    goMyOrder(){
      this.$router.push({name:"MyOrder"})
    },

    // 点击我的收藏跳转收藏页面
    goMycollections(){
      this.$router.push({name:"Mycollections"})
    },

    //点击地址管理 跳转至选择页面 并且传个自定义的值过去, 用于反回来我的页面
    goSelectAddress(){
      this.$router.push({name:"SelectAddress",query:{aa:1}})
    },

    // 点击安全中心 跳转至安全中心
    gosecurityCenter(){
      this.$router.push({name:"SecurityCenter"})
    }
  },
};
</script>

<style lang="less" scoped>
// 背景图片
.background {
  width: 100%;
  height: 200px;
  // background-image: url("../assets/images/1 (5).jpg");
  background-size: cover;
  .background_bg {
    width: 100%;
    height: 100%;
    // 修改背景图片上传文件组件的样式
    /deep/ .van-uploader__wrapper {
      height: 100%;
      .van-uploader__upload {
        width: 100%;
        height: 100%;
        margin: 0;
        background: transparent;
        .van-uploader__upload-icon {
          color: transparent;
        }
      }
    }
  }
}

//  我的页面背景一下内容的大盒子盒子 用于给m_c_content定位上去
.my_content {
  width: 100%;
  background: #f0f0f0;
  position: fixed;
  top: 200px;
  left: 0;
  right: 0;
  bottom: 50px;
  // 我的页面内容小盒子盒子
  .m_c_content {
    width: 95%;
    position: absolute;
    top: -45px;
    left: 0;
    right: 0;
    margin: auto;
    background: linear-gradient(
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 1)
    );
    padding: 8px 8px 0 8px;
    border-radius: 10px 10px 0 0;
    box-sizing: border-box;
    // 我的页面头像  昵称   个性签名位置
    .my_title {
      display: flex;
      align-items: center;
      // 头像
      .my_icon {
        flex: 1 0 1;
        height: 75px;
        width: 75px;
        border-radius: 50px;
        background: red;
        margin-right: 15px;
        background-size: cover;
        // 修改上传头像组件的样式
        /deep/ .van-uploader {
          height: 100%;
          width: 100%;
        }
        /deep/.van-uploader__upload {
          border-radius: 50px;
          background: transparent;
          .van-uploader__upload-icon {
            color: transparent;
          }
        }
      }
      // 昵称   个性签名位置
      .my_name {
        flex: 1;
        height: 80px;
        width: 100%;
        // 昵称
        .my_name_n {
          height: 50%;
          font-weight: bold;
          font-size: 14px;
          color: blue;
        }
        // 个性签名位置
        .my_tag {
          height: 50%;
          color: #555;
        }
      }
    }
    // 列表区
    .my_nav_item {
      margin-top: 60px;
      width: 100%;
      // 每条列表
      .item {
        font-size: 13px;
        color: #666;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 15px;
        border-bottom: 1px solid rgba(155, 146, 146, 0.4);
        &:last-child {
          border-bottom: transparent;
        }
      }
    }
  }
}
</style>